<template>
  <div>
    <h1>App</h1>
    <button @click="toNews">新闻</button>
    <button @click="toMusic">音乐</button>
    <button @click="toPlay">娱乐</button>
    <!-- 
      使用router-view组件对路由组件进行占位
     -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    toNews() {
      //在$router对象上有一个push和replace方法,可以进行 编程式路由导航
      //push可以留下历史记录,而replace不会留下历史记录
      // console.log(this.$router);
      //$router的push方法的方式1:接受一个url地址字符串作为参数
      // this.$router.push("/news");
      this.$router.replace("/news");
    },
    toMusic() {
      //$router的push方法的方式2:接收一个location对象作为参数,内部使用path属性书写地址
      /* this.$router.push({
        path: "/music",
      }); */
      this.$router.replace({
        path: "/music",
      });
    },
    toPlay() {
      //$router的push方法的方式3:接收一个location对象作为参数,内部使用name属性书写路由名称
      /* this.$router.push({
        name: "Play",
      }); */
      this.$router.replace({
        name: "Play",
      });
    },
  },
};
</script>

<style></style>
